<template>
	<view class="category-level" id="cartgory-three">
		<view class="category-level-box" >
			<nsSearch :siteId="siteId" ></nsSearch>
			<view class="categor-tab">
				<view :class="['c-tab',tabIndex == 1?'c-tab-act':'']" @click.stop="setTab(1)">
					<view class="tab-name">{{ $lang('categories') }}</view>
					<view class="after"></view>
				</view>
				<view :class="['c-tab',tabIndex == 2?'c-tab-act':'']" @click.stop="setTab(2)">
					<view class="tab-name">{{ $lang('shopStreet') }}</view>
					<view class="after"></view>
				</view>
			</view>
			<view class="category-goods" v-show="tabIndex == 1">
				<scroll-view scroll-y="true" class="oneScroll">
					<view class="scroll-left">
						<view
							class="oneScroll-item using-hidden"
							v-for="(item, index) in cateList"
							:key="index"
							:class="{ 'active color-base-text color-base-bg-before': item.category_id_1 == oneCategoryId }"
							@click="selectOneCategory(item.category_id_1, index)"
						>
							{{ item.short_name ? item.short_name : item.category_name }}
						</view>
						
					</view>
				</scroll-view>
				<view class="twoScroll">
					<view class="category-cate-top"></view>
					<scroll-view scroll-y="true" :style="{ height: 'calc(100% - ' + height + ' )' }" v-if="twoCateList.length">
						<image
							class="cate-adv"
							v-if="categoryAdvImage"
							:src="$util.img(categoryAdvImage)"
							@error="categoryAdvImage = $util.img('/upload/uniapp/default_ad.png')"
							mode="widthFix"
						></image>
						<view class="cate-right-box" v-for="(item, index) in twoCateList" :key="index">
							<view class="title using-hidden" @click="toListDetail(item.category_id_2)">{{ item.category_name }}</view>
							<view class="cate-goods-list">
								<view class="cate-goods-item" v-for="(i, j) in item.child_list" :key="j" @click="toListDetail(i.category_id_3)">
									<image v-if="i.image" class="goods-pic" :src="$util.img(i.image)" @error="threeCateImgError(index, j)" mode="aspectFit"></image>
									<image v-else class="goods-pic" :src="$util.getDefaultImage().default_category_img" mode="aspectFit"></image>
									<view class="goods-name using-hidden">{{ i.category_name }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<ns-empty v-else :isIndex="!1" :fixed="!1" :text="$lang('noProductCategory')"></ns-empty>
				</view>
			</view>
			
			<view class="shops-list" v-show="tabIndex == 2">
				<!-- <view class="shops-ul" v-if="shopsArr.length > 0">
					<view class="shops-li" v-for="(obj,k) in shopsArr" :key="k">
						<view class="li-top">
							<view class="left">
								<image src="https://img.xingxiovip.com/wx/icon/201911/1519521806sv" class="shops-img" mode="aspectFit"></image>
								<view class="shops-name">
									<view class="h3">{{obj.group_name}}</view>
									<view class="shops-level">
										<text class="shops-text">综合评级</text>
										<view class="level-imgs">
											<image v-for="(imgs,i) in levelimgs" :key="i" :src="imgs" class="level-icon" mode=""></image>
										</view>
										<view class="shops-text">｜宝贝 30</view>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="/static/icon/right_arrow_icon_01.png" class="arrow-r" mode=""></image>
							</view>
						</view>
						
						<view class="shops-pro">
							<image class="pro-img" src="https://img.xingxiovip.com/wx/icon/201911/1519521806sv" mode="aspectFit"></image>
							<image class="pro-img" src="https://img.xingxiovip.com/wx/icon/201911/1519521806sv" mode="aspectFit"></image>
							<image class="pro-img" src="https://img.xingxiovip.com/wx/icon/201911/1519521806sv" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				 <ns-empty  v-else text="暂无店铺列表"></ns-empty> -->
				<view @click="toRouter('/otherpages/shop/index/index?site_id=' + item.site_id)" class="shop-box" v-for="(item, index) in shopsArr"
				 :key="index">
					<view class="avatar">
						<image v-if="item.avatar" :src="$util.img(item.avatar)" @error="imgError(index)" mode="aspectFit"></image>
						<image v-else :src="$util.getDefaultImage().default_shop_img" mode="aspectFit" />
					</view>
					<view class="shop-desc">
						<view class="name-box">
							<view class="shop-name">
								{{ item.site_name }}
							</view>
							<!-- <text class="color-tip" style="font-size: 22rpx;">{{ $lang('distance') }}{{ item.distance|distance }}</text> -->
						</view>
						<view class="rate-box">
							<image class="icon-star margin-right" :src="$util.img('upload/uniapp/start.png')" mode=""></image>
							<view class="score">{{item.composite_score}} {{ $lang('part') }}</view>
						</view>
						<view class="shop-content color-tip margin-top">
							<view class="shop-content-left">
								<text>{{ $lang('mainBusiness') }}：{{ item.category_name }}</text>
                <text style="margin-left: 31rpx;">{{$lang('have')}}{{ item.sub_num }}{{$lang('peopleFollow')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-if="shopsArr.length == 0">
					<ns-empty :text="$lang('tip1')"></ns-empty>
				</view>
			</view>
		</view>
		<!-- <ns-empty :isIndex="!1" v-else text="暂无商品分类"></ns-empty> -->
	</view>
</template>

<script>
import nsSearch from '@/components/ns-search/ns-search.vue';
import globalConfig from '@/common/js/golbalConfig.js';
export default {
	data() {
		return {
			isLoadingCate: false,
			categoryAdvImage: '', //广告位
			cateList: [], //所有分类
			twoCateList: [], //二级分类
			threeCateList: [], //三级分类
			height: 0,
			oneCategoryId: 0,
			TwoCategoryId: 0,
			threeCategoryId: 0,
			tabIndex: 1,
			levelimgs: [
				'/static/icon/icon_stat_sel_01.png',
				'/static/icon/icon_stat_sel_01.png',
				'/static/icon/icon_stat_sel_01.png',
				'/static/icon/icon_stat_sel_01.png',
				'/static/icon/icon_stat_sel_01.png',
			],
			shopsArr: [],
			page: 1,
			totalPage: 1,
		};
	},
	components: {
		nsSearch
	},
	mixins: [globalConfig],
	props: {
		value: {
			type: Object
		},
		siteId:{
			type: [Number, String],
			default: 0
		}
	},
	created() {
		this.getCategoryList();
	},
	methods: {
		toRouter(e){
			this.$util.redirectTo(e)
		},
		// 切换
		setTab(type){
			if(type == this.tabIndex) return;
			this.tabIndex = type;
			if(type == 1){
				this.getCategoryList();
			}else {
				this.page = 1;
				this.totalPage = 1;
				this.getShops();
			}
		},
		// 店铺列表
		getShops(){
			this.$api.sendRequest({
				url: '/api/shop/page',
				method: 'post',
				data: {
					page: this.page,
					page_site: 10,
					keyword: '',
				},
				success:res=>{
					if(res.code == 0){
						let result = res.data;
						this.totalPage = result.page_count;
						if(this.page == 1){
							this.shopsArr = result.list
						}else {
							this.shopsArr.push(...result.list)
						}
						this.shopsArr.forEach(v=>{
							v.composite_score = ((parseFloat(v.shop_desccredit) + parseFloat(v.shop_servicecredit) +
								parseFloat(v.shop_deliverycredit)) / 3).toFixed(1);
						})
					}
				}
			})
		},
		// 分类列表
		getCategoryList() {
			this.isLoadingCate = false;
			this.$api.sendRequest({
				url: '/api/goodscategory/tree',
				data: {
					level: this.value.level,
					template: this.value.template
				},
				success: res => {
					this.isLoadingCate = true;
					if (res.code != 0) {
						this.$util.showToast({
							title: res.message
						});
						return false;
					}
					if (res.code == 0 && res.data.length) {
						this.cateList = res.data;
						this.categoryAdvImage = this.cateList[0].image_adv;
						this.oneCategoryId = this.cateList[0].category_id_1;

						if (res.data[0].child_list) {
							this.twoCateList = res.data[0].child_list;
							if (res.data[0].child_list[0]) {
								this.TwoCategoryId = res.data[0].child_list[0].category_id_2;
								this.threeCateList = res.data[0].child_list[0].child_list ? res.data[0].child_list[0].child_list : [];
							}
						}

						this.$nextTick(function() {
							const query = uni.createSelectorQuery().in(this);
							query
								.select('.category-cate-top')
								.boundingClientRect(data => {
									this.height = data.height + 'px';
								})
								.exec();
						});
					}

					this.$emit('netFinish', true);
				}
			});
		},
		toListDetail(id) {
			let url = '/pages/goods/list/list',
				data = {
					category_id: id
				};

			this.$util.redirectTo(url, data);
		},
		selectOneCategory(onecateId, index) {
			this.oneCategoryId = onecateId;
			this.categoryAdvImage = this.cateList[index].image_adv;

			this.twoCateList = this.cateList[index].child_list ? this.cateList[index].child_list : [];
			if (this.twoCateList.length) {
				this.TwoCategoryId = this.twoCateList[0].category_id_2;
				this.TwoCategoryIndex = 0;
			} else {
				this.TwoCategoryId = 0;
			}

			this.$nextTick(function() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.category-cate-top')
					.boundingClientRect(data => {
						this.height = data.height + 'px';
					})
					.exec();
			});
		},
		threeCateImgError(index,j) {
			this.twoCateList[index].child_list[j].image = this.$util.getDefaultImage().default_category_img;
			this.$forceUpdate();
		}
	},
	onReachBottom() {
		if(this.tabIndex == 2){
			if (this.page >= this.totalPage) return
			this.page++
			this.getShops()			
		}
	}
};
</script>
<style lang="scss">
@import '@/components/diy-goods-level-category/diy-goods-level-category.scss';
.cate-right-box {
	.title {
		display: block;
		width: 300rpx;
		font-size: 30rpx;
		font-size: $font-size-sub;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.cate-goods-list {
		padding: 0 34rpx;
		overflow: hidden;
		.cate-goods-item {
			margin: 0 60rpx 40rpx 0;
			width: 114rpx;
			display: inline-block;
			text-align: center;
			line-height: 1;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.goods-pic {
				width: 114rpx;
				height: 114rpx;
				margin-bottom: 20rpx;
			}
			.goods-name {
				font-size: $font-size-sub;
				color: $color-title;
			}
		}
	}
}

#cartgory-three {
	height: 100%;
	.categor-tab {
		width: 100%;
		padding: 30rpx 160rpx 0px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.c-tab {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			.tab-name {
				font-size: 28rpx;
				font-weight: 600;
				color: #92969E;
				margin-bottom: 8rpx;
			}
			.after {
				width: 70rpx;
				height: 6rpx;
				background: #31bb6d;
				border-radius: 4rpx;
				opacity: 0;
			}
		}
		.c-tab-act {
			.tab-name {
				color: #31bb6d;
			}
			.after {
				opacity: 1;
			}
		}
	}
	
	.shops-list {
		height: calc(100% - 200rpx);
		background: #f8f8f8;
		padding-top: 20rpx;
		.shops-ul {
			width: 100%;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			.shops-li {
				width: 100%;
				padding: 34rpx 26rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 16rpx;
				margin-bottom: 28rpx;
				.li-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;
					.left {
						display: flex;
						align-items: center;
						.shops-img {
							width: 80rpx;
							height: 80rpx;
							display: block;
							border-radius: 50%;
						}
						.shops-name {
							margin-left: 24rpx;
							.h3 {
								font-size: 32rpx;
								font-weight: 600;
								color: #282828;
								line-height: 44rpx;
								margin-bottom: 10rpx;
							}
							.level-imgs {
								display: flex;
								align-items: center;
								margin-left: 14rpx;
								.level-icon {
									width: 30rpx;
									height: 30rpx;
									display: block;
									margin-right: 8rpx;
								}
							}
							.shops-level {
								display: flex;
								align-items: center;
								.shops-text {
									font-size: 24rpx;
									color: #8A8A8F;
									line-height: 32rpx;
								}
							}
						}
					}
					
					.right {
						.arrow-r {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
				
				.shops-pro {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.pro-img {
						width: 198rpx;
						height: 198rpx;
						display: block;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
	
	.shop-box {
		// height: 100%;
		padding: $padding;
		margin: 0 $margin-both $margin-updown;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		border-radius: 15rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
	
		.avatar {
			background: #ffffff;
			width: 138rpx;
			height: 138rpx;
	
			image {
				width: 138rpx;
				height: 138rpx;
				border-radius: 10rpx;
				border: 1rpx solid $color-line;
			}
		}
	
		.shop-desc {
			width: calc(100% - 150rpx - 20rpx);
	
			.name-box {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
	
				.iconfont {
					font-size: 32rpx;
					line-height: 1;
				}
			}
	
			.rate-box {
				height: 40rpx;
				display: flex;
				align-items: center;
	
				.icon-star {
					width: 21rpx;
					height: 20rpx;
				}
	
				.score {
					display: inline-block;
					margin-left: 2rpx;
					color: #383838;
					line-height: 1;
					font-size: 20rpx;
				}
	
				.num {
					color: #838383;
					font-size: 20rpx;
					margin-left: 20rpx;
				}
			}
	
			.shop-content {
				display: flex;
				justify-content: space-between;
	
				.shop-content-left {
					font-size: $font-size-activity-tag;
					color: $color-sub;
				}
	
				.info-follow {
					padding: 5rpx 20rpx;
					border-radius: 40rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 30rpx;
					border: 1rpx solid;
				}
			}
	
			.shop-name {
				width: 70%;
				line-height: 1.3;
				margin-bottom: 12rpx;
				font-size: $font-size-base;
				font-size: 30rpx;
				font-weight: 600;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
	
			.shop-address {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 5rpx;
	
				.shop-address-desc {
					width: 70%;
					line-height: 1.3;
				}
	
				.iconfont {
					font-size: 40rpx;
					line-height: 1;
					margin-top: -30rpx;
				}
			}
		}
	}
	
	
}
</style>
